<template>
  <el-row>
          <el-col :span="15" :push="4" class="title">
            <h1>{{header}}</h1>
          </el-col>
          <el-col :span="6" :push="2">
            <div class="nowNser">
              <el-row>
                <el-col :span="6" :push="14">
                  <i class="el-icon-user"></i>
                  {{getUserName}}
                </el-col>
                <el-col :span="3" :push="14">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="退出登录"
                    placement="bottom"
                  >
                    <el-button type="info" icon="el-icon-switch-button" circle @click="outLogin"></el-button>
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "user",
  props:['header'],
  computed: {
    ...mapGetters(["getUserName"])
  },
  methods: {
    ...mapActions(["outLoginAct"]),
    outLogin() {
      this.outLoginAct();
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped lang="less">
.title {
  text-align: center;
}
h1 {
  margin: 0;
  padding: 0;
}
el-row {
  height: 100%;
}
.nowNser {
  width: 100%;
  height: 60px;
}
</style>
